//这个js的作用就是把loading组件变成一个js方法使用
import Vue from "vue";
import loading from "./myLoading.vue";
//loading组件
let myLoading = Vue.extend(loading);
//extend扩展方法可以理解为就是定义子组件 但是这种方法定义的子组件 可以挂载节点
let newLoading = new myLoading({
  el: document.createElement("div"),
  //把我们的loading组件挂载在一个新创建的div身上
  propsData: {
    show: false,
  },
  //传进去的props数据
});

let loadings = {
  show() {
    newLoading.show = true;
    document.body.appendChild(newLoading.$el);
    // 变量变成true之后 loading组件显示 还要把 这个子组件挂载的el 放到页面中去
  },
  hide() {
    newLoading.show = false;
    //变成false就隐藏了
  },
};
//定义显示和隐藏的方法
export default {
  install() {
    Vue.$loading = loadings;
    //不在组件里用的时候 就用Vue.$loading

    Vue.mixin({
      created() {
        this.$loading = loadings;
      },
    });
    //全局混入是在组件里用的时候 就用this.$loading
  },
};
